<template>
    <div class="register">
        <div class="top">
            <div class="title">{{ hospitalStore.hospitalInfo.hospital?.hosname }}</div>
            <div class="level">
                <i class="ri-thumb-up-line"></i><span>{{ hospitalStore.hospitalInfo.hospital?.param.hostypeString }}</span>
            </div>
        </div>
        <!-- 展示内容区域 -->
        <div class="content">
            <div class="left">
                <img :src="`data:image/jpeg;base64,${hospitalStore.hospitalInfo.hospital?.logoData}`" alt="">
            </div>
            <div class="right">
                <div>挂号规则</div>
                <div class="time">预约周期:{{ hospitalStore.hospitalInfo.bookingRule?.cycle }}
                    放号时间:{{ hospitalStore.hospitalInfo.bookingRule?.releaseTime }}
                    停挂时间:{{ hospitalStore.hospitalInfo.bookingRule?.stopTime }}</div>
                <div class="back">
                    退号时间：就诊前一工作日{{ hospitalStore.hospitalInfo.bookingRule?.quitTime }}前取消
                </div>
                <div class="rule">医院预约规则</div>
                <div class="method1">{{ hospitalStore.hospitalInfo.bookingRule?.rule[0] }}</div>
                <div class="method2">{{ hospitalStore.hospitalInfo.bookingRule?.rule[1] }}</div>

            </div>
        </div>
        <!-- 放置每个科室的内容区 -->
        <div class="deparment">
            <div class="leftnav">
                <ul>
                    <li @click="changeIndex(index)" v-for="(deparment, index) in hospitalStore.deparmentArr"
                        :key="deparment.depcode" :class="{ active: index == currentIndex }">{{ deparment.depname }}
                    </li>
                </ul>
            </div>
            <div class="right">
                <!-- 用一个div展示大科室和小科室 -->
                <div class="showdeparment" v-for="deparment in hospitalStore.deparmentArr" :key="deparment.depcode">
                    <h1 class="cur">{{ deparment.depname }}</h1>
                    <!-- 每个大科室里面的小科室 -->
                    <ul>
                        <li @click="showLogin(item)" v-for="item in deparment.children" :key="item.depcode">{{ item.depname }}</li>
                    </ul>
                </div>
            </div>

        </div>


    </div>
</template>

<script setup lang="ts">
import 'remixicon/fonts/remixicon.css'
// 引入医院详情仓库的数据
import useDetailStore from '@/store/modules/hospitalDetail'
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
// 获取路由器
let $router = useRouter()
// 获取路由对象
let $route = useRoute()
// import userStore from '@/store/modules/user.ts'
// let UserStore = userStore()
let hospitalStore = useDetailStore()

// 控制高亮的响应式数据
let currentIndex = ref<number>(0)
// 点击事件
const changeIndex = (index: number) => {
    currentIndex.value = index
    // 点击导航获取右侧的科室（大的科室h1标题）
    let allH1 = document.querySelectorAll('.cur')
    // 滚动到对应科室的位置
    allH1[currentIndex.value].scrollIntoView({
        behavior:'smooth'
    })
}

// 点击显示登录框
const showLogin = (item:any) => {
    // 登录组件对话框弹出
    // UserStore.visiable = true

    // 点击某一个医院科室按钮，进入到响应的预约挂号详情页面
    $router.push({path:'/hospital/register_step1',query:{hoscode:$route.query.hoscode,depcode:item.depcode}})

}
</script>

<style scoped lang="scss">
.register {
    .top {
        display: flex;

        .title {
            font-size: 30px;
            font-weight: bold;
        }

        .level {
            color: rgb(87, 87, 87);
            font-size: 14px;
            margin-left: 30px;
            line-height: 30px;
            text-align: center;
        }

    }

    .content {
        display: flex;
        margin-top: 30px;

        .left {
            width: 80px;

            img {
                width: 80px;
                height: 80px;
            }
        }

        .right {
            width: 1;
            margin-left: 30px;

            .time,
            .back,
            .method1,
            .method2 {
                margin-top: 10px;
                color: rgb(87, 87, 87);
            }

            .rule {
                margin-top: 10px;
                font-size: large;
            }
        }
    }

    .deparment {
        width: 100%;
        display: flex;
        margin: 30px 0;

        .leftnav {
            flex: 0.2;

            ul {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                li {
                    text-align: center;
                    line-height: 40px;
                    color: rgb(87, 87, 87);
                    font-size: 14px;

                    &.active {
                        color: skyblue;
                        background-color: rgb(236, 245, 255);
                        border-left: 1px solid rgb(64, 158, 255);
                    }
                }

                li:hover {
                    color: skyblue;
                    cursor: pointer;

                }
            }

        }

        .right {
            flex: 1;
            height: 480px;
            overflow: auto;
            &::-webkit-scrollbar{
                width: 0;
                height: 0;
            }

            .showdeparment {
                h1 {
                    background-color: rgb(245, 239, 239);
                    color: rgb(87, 87, 87);
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    color: rgb(87, 87, 87);
                    font-size: 14px;

                    li {
                        width: 33%;
                        margin: 5px 0;
                        &:hover{
                            color: skyblue;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}</style>